<style>
  #green {
    color: green;
  }
  .red {
    color: red;
  }
  .orange {
    color: orange;
  }
  .static {
    font-weight: bold;
  }
  [v-cloak] {
    opacity: 0;
  }
</style>

<script type="module">
  import { createApp, reactive } from '../src'

  // for testing
  const data = (window.data = reactive({
    id: 'green',
    classes: ['foo', { red: true }],
    style: { color: 'blue' },
    obj: {
      class: 'orange'
    }
  }))

  createApp(data).mount()
</script>

<div v-scope v-cloak>
  <div :id="id">simple binding - this should be green</div>
  <div class="static" :class="classes">
    class binding - this should be red and bold
  </div>
  <div style="font-weight: bold" :style="style">
    style binding - this should be blue and bold
  </div>
  <div v-bind="obj">object binding - this should be orange</div>
</div>
